<%
local api = require "luci.model.cbi.passwall.api.api"
local dsp = require "luci.dispatcher"
local ipkg = require "luci.model.ipkg"

local function is_finded(e)
	local result=luci.sys.exec("find /usr/*bin -iname "..e.." -type f")
	if result~="" then
		return true
	end
	return false
end

local tcp_node_num = api.uci_get_type("global_other", "tcp_node_num", 1)
local udp_node_num = api.uci_get_type("global_other", "udp_node_num", 1)
local socks_node_num = api.uci_get_type("global_other", "socks_node_num", 1)

local status_show_check_port = api.uci_get_type("global_other", "status_show_check_port", 0)
local status_show_ip111 = api.uci_get_type("global_other", "status_show_ip111", 0)
-%>

<style>
/*!
Pure v1.0.1
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}
    @media screen and (min-width: 1600px) {
		.status{
			margin: 1rem -0.5rem 1rem -0.5rem;
		}
	}
    .block{
        margin: 0.5rem 0.5rem;
        padding: 0;
        font-weight: normal;
        font-style: normal;
        line-height: 1;
        font-family: inherit;
        min-width: inherit;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid rgba(0,0,0,.05);
        border-radius: .375rem;
        background-color: #fff;
        box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
    }
    .img-con{
        margin: 1rem;

    }
    .green{
		font-size:.9rem;
        color: #2dce89;
    }
    .red{
		font-size:.9rem;
        color: #fb6340;
    }
	.yellow{
		font-size:.9rem;
        color: #b9b90b;
    }
	
	.sk-text-success{
        color: #2dce89;
    }
	.sk-text-error{
        color: #fb6340;
    }
	.gap{
		margin-right:0.5rem;
	}
    .block img{
        width: 48px;
        height: auto;
		float:right;
    }
    .pure-u-5-8{
        display:flex;
        align-items:center;
    }

    .block h4{
        font-size: .8125rem;
        font-weight: 600;
        margin: 1rem;
		color:#8898aa!important;
        line-height: 1.8em;
		min-height: 48px;
    }
	
	.check {
		cursor: pointer;
	}

    @media screen and (max-width: 720px) {
        .pure-u-1-4{
            width:50%;
        }
		.pure-u-1-2{
            width:100%;
        }
    }

</style>

<fieldset id="_passwall_status_fieldset" class="cbi-section">
	<legend>
		<%:Running Status%>
	</legend>
    <div class="pure-g status">
        <div class="pure-u-1-4">
            <div class="block pure-g">
                <div class="pure-u-16-24">
				<h4 id="status_tcp_node">TCP<br /><span class="red"><%:NOT RUNNING%></span></h4>
                </div>
                <div class="pure-u-8-24">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
				<br />
            </div>
        </div>
        <div class="pure-u-1-4">
            <div class="block pure-g">
                <div class="pure-u-16-24">
				<h4 id="status_udp_node">UDP<br /><span class="red"><%:NOT RUNNING%></span></h4>
                </div>
                <div class="pure-u-8-24">
                    <div class="img-con">
                        <img
                            src="" />
                    </div>
                </div>
            </div>
        </div>
		<div class="pure-u-1-4">
            <div class="block pure-g">
                <div class="pure-u-16-24">
				<h4 id="status_socks_node">Socks<br /><span class="red"><%:NOT RUNNING%></span></h4>
                </div>
                <div class="pure-u-8-24">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
            </div>
        </div>
        <div class="pure-u-1-4">
            <div class="block pure-g">
                <div class="pure-u-16-24">
                    <h4 id="status_dns">DNS<br /><span class="red"><%:NOT RUNNING%></span></h4>
                </div>
                <div class="pure-u-8-24">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
            </div>
        </div>
		<div class="pure-u-1-4">
            <div class="block pure-g">
                <div class="pure-u-16-24">
                    <h4 id="status_haproxy"><%:Load Balancing%><br /><span class="red"><%:NOT RUNNING%></span></h4>
                </div>
                <div class="pure-u-8-24">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
            </div>
        </div>
		<div class="pure-u-1-4">
            <div class="block pure-g">
                <div class="pure-u-16-24">
                    <h4 id="status_kcptun">Kcptun<br /><span class="red"><%:NOT RUNNING%></span></h4>
                </div>
                <div class="pure-u-8-24">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
            </div>
        </div>
		<div class="pure-u-1-4 check" onclick="check_connect('baidu')">
            <div class="block pure-g">
                <div class="pure-u-16-24">
                    <h4 id="status_baidu"><%:Baidu Connection%><br /><span id="_baidu_status" class="red"><%:Touch Check%></span></h4>
                </div>
                <div class="pure-u-8-24">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
            </div>
        </div>
		<div class="pure-u-1-4 check" onclick="check_connect('google')">
            <div class="block pure-g">
                <div class="pure-u-16-24">
                    <h4 id="status_google"><%:Google Connection%><br /><span id="_google_status" class="red"><%:Touch Check%></span></h4>
                </div>
                <div class="pure-u-8-24">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
            </div>
        </div>
		<% if tonumber(status_show_check_port) == 1 then %>
		<div class="pure-u-1-2 check" onclick="check_port(this)">
            <div class="block pure-g">
                <div class="pure-u-4-5">
                    <h4><%:Node Check%><br /><span id="_check_nodes_status" class="red"><%:Touch Check%></span></h4>
					<input id="clear_check_port_btn" type="button" class="cbi-button cbi-button-remove" style="display:none" value="<%:Clear%>" />
                </div>
                <div class="pure-u-1-5">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
            </div>
        </div>
		<% end %>
		<% if tonumber(status_show_ip111) == 1 then %>
		<div class="pure-u-1-2 check" onclick="javascript:window.open('http://www.ip111.cn/','target');">
            <div class="block pure-g">
                <div class="pure-u-4-5">
                    <h4>IP111.cn<br /><span class="red"><%:Touch Check%></span></h4>
                </div>
                <div class="pure-u-1-5">
                    <div class="img-con">
                        <img
                            src="" />
					</div>
                </div>
            </div>
        </div>
		<% end %>
    </div>
    <script>
		//<![CDATA[
		var imgs = document.getElementsByTagName('img');
		for (var i = 0 ; i < imgs.length; i++) {
			document.getElementsByTagName('img')[i].setAttribute("oncontextmenu","return false;");
			document.getElementsByTagName('img')[i].setAttribute("ondragstart","return false;");
		}
        XHR.poll(5, '<%=dsp.build_url("admin/vpn/passwall/status")%>', null,
            function (x, data) {
                var status_dns = document.getElementById('status_dns');
                var status_haproxy = document.getElementById('status_haproxy');
				var status_kcptun = document.getElementById('status_kcptun');
				if (data) {
					var tcp_node_num = <%=tcp_node_num%>;
					if (tcp_node_num >= 1) {
						var status_tcp_node = document.getElementById('status_tcp_node');
						if (status_tcp_node) {
							var text = 'TCP<br />';
							if (tcp_node_num == 1) {
								if (data["tcp_node1_status"])
									text += '<span class="green"><%:RUNNING%></span>';
								else
									text += '<span class="red"><%:NOT RUNNING%></span>';
							} else {
								for(var i = 0; i < tcp_node_num; i++) {
									var k = i + 1;
									if (data["tcp_node" + k + "_status"])
										text += '<span class="green"> ✓</span>';
									else
										text += '<span class="red"> X</span>';
								}
							}
							status_tcp_node.innerHTML = text;
						}
						var status_kcptun = document.getElementById('status_kcptun');
						if (status_kcptun) {
							var text = 'Kcptun<br />';
							if (tcp_node_num == 1) {
								if (data["kcptun_tcp_node1_status"])
									text += '<span class="green"><%:RUNNING%></span>';
								else
									text += '<span class="red"><%:NOT RUNNING%></span>';
							} else {
								for(var i = 0; i < tcp_node_num; i++) {
									var k = i + 1;
									if (data["kcptun_tcp_node" + k + "_status"])
										text += '<span class="green"> ✓</span>';
									else
										text += '<span class="red"> X</span>';
								}
							}
							status_kcptun.innerHTML = text;
						}
					}
					
					var udp_node_num = <%=udp_node_num%>;
					if (udp_node_num >= 1) {
						var status_udp_node = document.getElementById('status_udp_node');
						if (status_udp_node) {
							var text = 'UDP<br />';
							if (udp_node_num == 1) {
								if (data["udp_node1_status"])
									text += '<span class="green"><%:RUNNING%></span>';
									else
									text += '<span class="red"><%:NOT RUNNING%></span>';
							} else {
								for(var i = 0; i < udp_node_num; i++) {
									var k = i + 1;
									if (data["udp_node" + k + "_status"])
										text += '<span class="green"> ✓</span>';
									else
										text += '<span class="red"> X</span>';
								}
							}
							status_udp_node.innerHTML = text;
						}
					}
					
					var socks_node_num = <%=socks_node_num%>;
					if (socks_node_num >= 1) {
						var status_socks_node = document.getElementById('status_socks_node');
						if (status_socks_node) {
							var text = 'Socks<br />';
							if (socks_node_num == 1) {
								if (data["socks_node1_status"])
									text += '<span class="green"><%:RUNNING%></span>';
								else
									text += '<span class="red"><%:NOT RUNNING%></span>';
							} else {
								for(var i = 0; i < socks_node_num; i++) {
									var k = i + 1;
									if (data["socks_node" + k + "_status"])
										text += '<span class="green"> ✓</span>';
									else
										text += '<span class="red"> X</span>';
								}
							}
							status_socks_node.innerHTML = text;
						}
					}
					
                    if (data.dns_mode_status) {
                        status_dns.innerHTML = 'DNS<br /><span class="green"><%:RUNNING%></span>';
                    } else {
                        status_dns.innerHTML = 'DNS<br /><span class="red"><%:NOT RUNNING%></span>';
                    }
					if (status_haproxy) {
						if (data.haproxy_status) {
							status_haproxy.innerHTML = '<%:Load Balancing%><br /><span class="green"><%:RUNNING%></span>'
						} else {
							status_haproxy.innerHTML = '<%:Load Balancing%><br /><span class="red"><%:NOT RUNNING%></span>'
						}
					}
				}
			});
			
		function check_connect(type) {
			var s = document.getElementById('_' + type + '_status');
			if (s) {
				var div = s.parentNode.parentNode.parentNode.parentNode;
				div.removeAttribute('onclick');
				s.innerHTML = '<%:Check...%>';
				var sendDate = (new Date()).getTime();
				XHR.get('<%=dsp.build_url("admin/vpn/passwall/connect_status")%>', {
						type: type
					},
					function(x, rv) {
						if (rv.status) {
							var use_time = rv.use_time;
							var speed = "";
							if (use_time < 1) {
								s.className="green";
								speed = "<%:Very Fast%>";
							} else if (use_time < 2) {
								s.className="green";
								speed = "<%:Fast%>";
							}  else if (use_time < 3) {
								s.className="yellow";
								speed = "<%:General%>";
							} else if (use_time < 4) {
								s.className="red";
								speed = "<%:Slow%>";
							} else if (use_time >= 4) {
								s.className="red";
								speed = "<%:Very Slow%>";
							}
							s.innerHTML = speed;
						}
						else {
							s.className="red";
							s.innerHTML = '<%:Problem detected!%>';
						}
						div.setAttribute('onclick','check_connect("' + type + '")');
					}
				);
			}
			return false;
		}

		function check_port(dom) {
			var s = document.getElementById('_check_nodes_status');
			if (s) {
				dom.removeAttribute('onclick');
				s.innerHTML = '<%:Check...%>';
				XHR.get('<%=dsp.build_url("admin/vpn/passwall/check_port")%>', null,
					function(x, rv) {
						if (rv.ret) {
							s.innerHTML = rv.ret;
							var clear_btn = document.getElementById('clear_check_port_btn');
							clear_btn.style.display = "inline-block";
							clear_btn.onclick = function(event) {
								clear_check_port(clear_btn);
								if(event.stopPropagation)
									event.stopPropagation();
								else
									event.cancelBubble = true;
							}
						}
						dom.setAttribute('onclick','check_port(this)');
					}
				);
			}
			return false;
		}

		function clear_check_port(btn) {
			btn.style.display = 'none';
			var s = document.getElementById('_check_nodes_status');
			s.innerHTML = "<%:Touch Check%>";
			return false;
		}
//]]>
    </script>
</fieldset>
